<template>
  <div class="center">
    <!-- <div class="build_desc">
      <div>
        <img src="../../../assets/images/datavPop/unit.png" alt="" />{{
          dialogAlarmInfo.orgName
        }}
      </div>
      <div>
        <img src="../../../assets/images/datavPop/address.png" alt="" />{{
          dialogAlarmInfo.name
        }}
      </div>
    </div> -->

    <!-- <div class="build_desc">
      <div>所属设备：用户传输装置
      </div>
      <div>
        设备序列号：3532423434
      </div>
    </div> -->

    <div class="center_title" v-if="show" >
        告警类型：
        <dict-tag :options="dict.type.device_alarm_type" :value="dialogAlarmInfo.alarmType" :showTitle="true"/>
      <!-- {{ dialogAlarmInfo.alarmType | alarmTypeText3(dict) }} -->
    </div>
    <div class="detailsSystem" v-if="show">
      <div class="details_left">
        <div class="system_one">
          <div class="everySystemDevice" v-if="!detail.parentDeviceCode">
            <div style="color: #58c0f9">信号强度</div>
            <div>
              <span v-if="deviceList.ecl == 0">优</span>
              <span v-else-if="deviceList.ecl == 1">良</span>
              <span v-else-if="deviceList.ecl == 2">差</span>
              <span v-else-if="deviceList.ecl == '' || deviceList.ecl == null"
                >-</span
              >
              <span v-else>差</span>
            </div>
          </div>
          <div class="everySystemDevice" v-else>
            <div style="color: #58c0f9">探测器名称</div>
            <div>{{ detail.detectorName }}</div>
          </div>
        </div>
        <div class="system_three" v-if="!detail.parentDeviceCode">
          <div class="everySystemDevice">
            <div style="color: #58c0f9">设备状态</div>
            <div>
              <!-- <span v-if="deviceList.batteryVoltage==null || deviceList.batteryVoltage=='' || deviceList.batteryVoltage==0">-</span>
              <span v-else>{{ deviceList.batteryVoltage }}V</span> -->
              <span v-if="deviceList.online == 1" style="color: #28c76f"
                >在线</span
              >
              <span v-else style="color: #ea3e33">离线</span>
            </div>
          </div>
        </div>
      </div>
      <div class="details_center">
        <img
          src="../../../assets/images/datavPop/doorSensor.png"
          v-if="dialogAlarmInfo.deviceType == 'DoorMagnetism'"
        />
        <img
          src="../../../assets/images/datavPop/smoke.png"
          v-else-if="dialogAlarmInfo.deviceType == 'GasSensor'"
        />
        <img
          src="../../../assets/images/datavPop/infrared.png"
          v-else-if="dialogAlarmInfo.deviceType == 'Infrared'"
        />
        <img
          src="../../../assets/images/datavPop/smoke.png"
          v-else-if="dialogAlarmInfo.deviceType == 'SmokeAlarm'"
        />
        <img
          src="../../../assets/images/datavPop/hydraulic.png"
          v-else-if="dialogAlarmInfo.deviceType == 'FireHydrant'"
        />
        <img
          src="../../../assets/images/datavPop/TemperatureAlarm.png"
          v-else-if="dialogAlarmInfo.deviceType == 'TemperatureAlarm'"
        />
        <img
          src="../../../assets/images/datavPop/WaterSensor.png"
          v-else-if="dialogAlarmInfo.deviceType == 'WaterSensor'"
        />
        <img :src="tonyon" v-else-if="detail.parentDeviceCode" />
        <img :src="getsrc(dialogAlarmInfo.deviceType)" v-else />
        <!-- <img :src="tonyon" v-else /> -->
        <div class="details_imei">
          <!-- {{ detail.parentDeviceCode ? "探测器编码：" : "设备编码："
          }}{{ dialogAlarmInfo.imei }} -->
          <span v-if="detail.parentDeviceCode">探测器编码：{{dialogAlarmInfo.subDeviceCode}}</span>
          <span v-else>设备编码：{{ dialogAlarmInfo.imei }}</span>
        </div>
      </div>
      <div class="details_right">
        <div class="system_four">
          <div class="everySystemDevice" v-if="!detail.parentDeviceCode">
            <div style="color: #58c0f9">电量值</div>
            <div>
              <span
                v-if="
                  deviceList.batteryValue == null ||
                  deviceList.batteryValue == '' ||
                  deviceList.batteryValue == 0
                "
                >-</span
              >
              <span v-else>{{ deviceList.batteryValue }}%</span>
            </div>
          </div>
          <div class="everySystemDevice" v-else>
            <div style="color: #58c0f9">探测器型号</div>
            <div>{{ detail.detectorTypeName }}</div>
          </div>
        </div>
        <div class="system_six" v-if="!detail.parentDeviceCode">
          <!-- 烟感 -->
          <div
            class="everySystemDevice"
            v-if="dialogAlarmInfo.deviceType == 'SmokeAlarm'"
          >
            <div style="color: #58c0f9">烟雾浓度</div>
            <div>{{ deviceList.smokeValue || "-" }}</div>
          </div>
          <!-- 燃气 -->
          <div
            class="everySystemDevice"
            v-if="dialogAlarmInfo.deviceType == 'GasSensor'"
          >
            <div style="color: #58c0f9">气体浓度采样值</div>
            <div>{{ deviceList.gasSampleValue || "-" }}</div>
          </div>
          <!-- 门磁 -->
          <div
            class="everySystemDevice"
            v-if="dialogAlarmInfo.deviceType == 'DoorMagnetism'"
          >
            <div style="color: #58c0f9">开关门状态</div>
            <div>
              <span v-if="deviceList.status == 1">开门</span>
              <span v-else>关门</span>
            </div>
          </div>
          <!-- 红外 -->
          <div
            class="everySystemDevice"
            v-if="dialogAlarmInfo.deviceType == 'Infrared'"
          >
            <div style="color: #58c0f9">工作模式</div>
            <div>
              <span v-if="deviceList.workMode == 0">普通模式</span>
              <span v-if="deviceList.workMode == 1">实时上报模式</span>
              <span v-if="deviceList.workMode == 2">活动量统计模式</span>
              <span v-if="deviceList.workMode == 3">建行模式</span>
              <span v-if="deviceList.workMode == 4">三小场所模式</span>
              <span v-if="deviceList.workMode == 5">老人独居模式</span>
            </div>
          </div>
          <!-- 消防水压 -->
          <div
            class="everySystemDevice"
            v-if="dialogAlarmInfo.deviceType == 'FireHydrant'"
          >
            <div style="color: #58c0f9">传感器数据</div>
            <div>{{ deviceList.sensor_dat || "-" }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="vidicon_div" v-else>
      <vidicon
        ref="refvidicon"
        :sn="dialogAlarmInfo.sn"
        :dialogAlarmInfo="dialogAlarmInfo"
      ></vidicon>
    </div>
    <div class="systemBtn" :style="!show ? 'margin-top: 0;' : ''">
      <el-button
        @click="Alarmchuli(1)"
        v-if="dialogAlarmInfo.status == '1' "
        class="fire"
        ><img
          src="../../../assets/images/datavPop/fire.png"
        />真实告警</el-button
      >
      <el-button
        @click="Alarmchuli(2)"
        v-if="dialogAlarmInfo.status == '1'"
        class="misdeclaration"
        ><img
          src="../../../assets/images/datavPop/misdeclaration.png"
        />误报</el-button
      >
      <el-button
        @click="oncommand()"
        class="finish"
        v-if="detail.parentDeviceCode && tableData.length"
        ><img
          src="../../../assets/images/datavPop/liandon.png"
        />远程控制</el-button
      >
      <!-- <el-button @click="addSubmit" v-if="dialogAlarmInfo.status == '2'" class="finish"><img
          src="../../../assets/images/datavPop/finish.png">完结</el-button> -->
      <!-- <el-button
        @click="onVoiceLog"
        v-if="dialogAlarmInfo.status == '3'"
        class="finish"
        >接听情况 <i class="el-icon-d-arrow-right"></i
      ></el-button> -->
    </div>
    <div
      class="remark"
      style="text-align: center"
      v-if="detail.parentDeviceCode && detail.remark"
    >
      备注：{{ detail.remark }}
    </div>
  </div>
</template>

<script>
import { reqDeviceDataget, reqProductList } from "@/api/api";
import vidicon from "./modeuls/vidicon.vue";

export default {
  dicts: ['device_alarm_type'],
  props: ["dialogAlarmInfo", "show", "detail", "tableData"],
  components: { vidicon },
  data() {
    return {
      deviceList: {},
      ProductList: [],
      tonyon: require("../../../assets/images/datavPop/tonyon.png"),
      // show:false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    getsrc(deviceType) {
      let src = "";
      this.ProductList.forEach((item) => {
        if (item.deviceType == deviceType) {
          src = item.pic;
          return;
        }
      });
      // if(src==''){
      //   src=this.tonyon
      // }
      return src;
    },
    // 获取产品列表
    async onProductList() {
      let res = await reqProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows } = res.data;
      this.ProductList = rows;
    },
    async getDeviceDataget(imei) {
      const res = await reqDeviceDataget(imei);
      // console.log(res, 'res');
      this.deviceList = res.data.rows || {};
    },
    Alarmchuli(e) {
      this.$emit("Alarmchuli", e);
    },
    oncommand() {
      this.$notify.closeAll();
      if (this.tableData.length == 0)
        return this.$modal.notifyWarning("暂无指令下发");
      this.$emit("oncommand");
    },
    addSubmit() {
      this.$emit("addSubmit");
    },
    // 点击接听对象
    async onVoiceLog() {
      this.$emit("onVoiceLog");
      // let res = await reqPageVoiceLog(1, 1, {
      //   alarmId: this.dialogAlarmInfo.id,
      // });
      // if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // if (!res.data.total) return this.$modal.notifyWarning("暂无数据");
      // this.$refs.refVoiceLog.dialogVisible = true;
      // this.$refs.refVoiceLog.PageSmsLog();
    },
    destroy() {
      this.$refs.refvidicon.destroy();
    },
  },
  created() {
    console.log("dialogAlarmInfo", this.dialogAlarmInfo);
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.center {
  position: relative;
  width: 100%;
  // height: 100%;

  .build_desc {
    padding: 0.6vh 1vw;
    background: #053d71;
    width: 90%;
    margin: 10px auto;
    border: 10px;

    > div {
      display: flex;
      align-items: center;
      .fontSize(16);
    }

    > div:first-of-type {
      margin-bottom: 0.6vh;
      // .fontSize(20);
    }

    img {
      .width(16);
      height: auto;
      margin-right: 0.5vw;
    }
  }

  .center_title {
    text-align: center;
    // margin-top: 8vh;
    padding-top: 5vh;
    .fontSize(20);
  }

  .detailsSystem {
    display: flex;
    width: 38vw;
    margin: 0 auto;
    background: url("../../../assets/images/datavPop/bottom.png") no-repeat
      center bottom;
    background-size: 45%;
    margin-top: 4vh;
    .fontSize(14);

    .details_left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 3vh;

      .everySystemDevice {
        width: 59%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        text-align: center;

        > div:first-of-type {
          .fontSize(16);
        }
      }

      .system_one {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/upleft.png") no-repeat;
        background-size: 100% 100%;
      }

      .system_three {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/leftLower.png")
          no-repeat;
        background-size: 100% 100%;
      }
    }

    .details_center {
      flex: 1;
      .fontSize(16);
      // padding-bottom: 8vh;
      position: relative;

      .details_imei {
        position: absolute;
        bottom: 13vh;
        left: 50%;
        transform: translateX(-50%);
        // width: 100%;
        width: 230px;
        text-align: center;
      }

      img:first-of-type {
        width: 10vw;
        margin-bottom: 20vh;
      }
    }

    .details_right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      padding-bottom: 3vh;

      .everySystemDevice {
        width: 59%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        text-align: center;

        > div:first-of-type {
          .fontSize(16);
        }
      }

      .system_four {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/upperRight.png")
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
      }

      .system_six {
        width: 14vw;
        height: 10vh;
        background: url("../../../assets/images/datavPop/lowRight.png")
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .systemBtn {
    margin-top: 3vh;
    width: 100%;
    display: flex;
    justify-content: center;

    .fire {
      border: 1px solid #eb564f;
      background: #261c47 !important;
    }

    .misdeclaration {
      border: 1px solid #f1b95c;
      background: #30304c !important;
    }

    .finish {
      border: 1px solid #58c0f9;
      background: #11295e !important;
    }

    .el-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0 20px;
      .width(110);
      .height(48);

      ::v-deep span {
        display: flex;
        align-items: center;
        .fontSize(16);
      }
    }

    img {
      width: 1.1vw;
      margin-right: 5px;
    }
  }
  .remark {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    .fontSize(12);
    color: #e7e8ea;
  }
}
.vidicon_div {
  // height: 80%;
  height: 450px;
  padding: 30px 20px 0 20px;
  box-sizing: border-box;
}
</style>
